import React from 'react';

import FormItem, { FormItemProps, } from 'antd/lib/form/FormItem';
import { IFormProps, FormContext } from './Form';
import * as  validate from './validate'
interface IFormRender extends IFormProps {
	field: string,
}
export interface IFormItemProps extends FormItemProps {
	fieldDecoratorOptions?: any,
	field: string,
	render?: any,
	validates?: any[],
	itemLayout?: object
}

export default class MyFormItem extends React.Component<IFormItemProps, any> {

	renderItem = ({ form, model, layout }: IFormProps) => {

		let { render, label, field, fieldDecoratorOptions = {}, validates, extra, itemLayout } = this.props;

		// console.log("myformItem-props:", this.props)
		let { getFieldDecorator } = form;
		let formItemLayout = itemLayout ? itemLayout
			: (layout === 'horizontal' ? {
				// xs:480, sm:576, md: 768, lg:992, xl:1200, xxl:1600
				labelCol: {
					xxl: { span: 8 },
					xl: { span: 8 },
					lg: { span: 8 },
					md: { span: 12 },
					sm: { span: 16 },
					xs: { span: 24 },
				},
				wrapperCol: {
					xxl: { span: 8 },
					xl: { span: 8 },
					lg: { span: 8 },
					md: { span: 12 },
					sm: { span: 16 },
					xs: { span: 24 },
				},
			} : null)

		fieldDecoratorOptions.rules = validate.getRules(this.props, validates);
		fieldDecoratorOptions = { initialValue: model[field], ...fieldDecoratorOptions }
		// console.log("formItem-fieldDecoratorOptions", fieldDecoratorOptions)
		let fieldDecorator = getFieldDecorator(field, fieldDecoratorOptions);
		return (
			<FormItem label={label} {...formItemLayout} extra={extra}>
				{fieldDecorator(render({ field, form, model }))}
			</FormItem>)
	}
	render() {
		return (
			<FormContext.Consumer>
				{this.renderItem}
			</FormContext.Consumer>)
	}
}